<template>
  <div class="lable_page_teacher">
    <lable-page :itemList=contentList @changeLable="lableChange"></lable-page>
    <div class="teacher-main">
        <div class="teacher-img">
            <img :src="imgList[current].img">
        </div>
        <div class="teacher-text">
            {{contentList[current] && contentList[current].text}}
        </div>
    </div>
  
  </div>
</template>

<script>
import lablePage from '../publicComponent/lablePage'

import {collegeTeacherStrength} from '@/api/getData'
export default {
  name: 'lable_page_teacher',
  data () {
      return{
        current: '0',
        imgList: [
            {
                img: '/img/insert/college-teacher1.jpg'
            },
            {
                img: '/img/insert/college-teacher2.jpg'
            },
            {
                img: '/img/insert/college-teacher3.jpg'
            }
           
        ],
        contentList: []
      }
    
  },
  mounted(){
    collegeTeacherStrength.call(this).then(res=>{
        res.forEach(el => {
            this.contentList.push({
                coursename: el.title,
                text: el.detail
            })
        })
    })
  },
  components: {
    lablePage
  },
  methods: {
      lableChange(key){
        this.current = key
      }
  }
}
</script>

<style lang="stylus" scoped>
.lable_page_teacher{
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  border-bottom: 1px solid transparent;  
}
.teacher-main{
    padding: 40px 30px;
    .teacher-img{
        width: 1140px;
        height: 174px;
        img{
            width: 100%;
            height: 100%;
        }
        margin-bottom: 30px;
    }
    .teacher-text{
        font-size:14px;
        font-family:MicrosoftYaHei;
        color:rgba(30,30,30,1);
        line-height:34px;
    }
}
</style>
